<template>
  <div class='comprehensive'>
    <div class="comprehensive-left">
      <div class="nav">
        <div class="left">
          <a v-for='(item,index) in main.slice(0,12)' :key='index' :href="keyUrl+item.url">{{item.title}}</a>
        </div>
        <div class="right">
          <swiper :options="swiperOption" ref="mySwiper" class="c-swiper" v-if="banner.length>0">
            <swiper-slide v-for='(item,index) in banner' :key='index'>
              <div class="page">
                <a :href="keyUrl+item.url">
                <img :src="keyUrl+(item.image.replace('-lp',''))"></a>
                <span>{{item.title}}</span>
              </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev"
            slot="button-prev"></div>
           <div class="swiper-button-next"
            slot="button-next"></div>
          </swiper>

        </div>
      </div>

      <div class="content-wrap">
        <div class="box">
          <div class="tit">
            <span>羽毛球</span>
            <router-link tag="span" :to='{name:"list",params:{api:"getTYYmq"}}' class="more">更多>></router-link>
          </div>
          <div class="word">
            <template v-for='(item,index) in ymq.slice(0,1)'>
              <a :href="keyUrl+item.url" class="word-img"><img :src="keyUrl+item.image" alt=""></a>
            </template>
            
            <ul>
              <li v-for='(item,index) in ymq.slice(0,5)' :key='index'>
                <a :href="keyUrl+item.url">
                  <span>{{item.title}}</span><span class="time-word">{{item.pubdate}}日</span>
                </a>
              </li>
            </ul>
          </div>
          <div class="word">
            <template v-for='(item,index) in ymq.slice(5,6)'>
              <a :href="keyUrl+item.url" class="word-img"><img :src="keyUrl+item.image" alt=""></a>
            </template>
            
            <ul>
              <li v-for='(item,index) in ymq.slice(5,10)' :key='index'>
                <a :href="keyUrl+item.url">
                  <span>{{item.title}}</span><span class="time-word">{{item.pubdate}}日</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="box">
          <div class="tit">
            <span>排球</span>
            <router-link tag="span" :to='{name:"list",params:{api:"getTYPq"}}' class="more">更多>></router-link>
          </div>
          <div class="word">
            <template v-for='(item,index) in pq.slice(0,1)'>
              <a :href="keyUrl+item.url" class="word-img"><img :src="keyUrl+item.image" alt=""></a>
            </template>
            
            <ul>
              <li v-for='(item,index) in pq.slice(0,5)' :key='index'>
                <a :href="keyUrl+item.url">
                  <span>{{item.title}}</span><span class="time-word">{{item.pubdate}}日</span>
                </a>
              </li>
            </ul>
          </div>
          <div class="word">
            <template v-for='(item,index) in pq.slice(5,6)'>
              <a :href="keyUrl+item.url" class="word-img"><img :src="keyUrl+item.image" alt=""></a>
            </template>
            
            <ul>
              <li v-for='(item,index) in pq.slice(5,10)' :key='index'>
                <a :href="keyUrl+item.url">
                  <span>{{item.title}}</span><span class="time-word">{{item.pubdate}}日</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="box">
          <div class="tit">
            <span>乒乓球</span>
            <router-link tag="span" :to='{name:"list",params:{api:"getTYPpq"}}' class="more">更多>></router-link>
          </div>
          <div class="word">
            <template v-for='(item,index) in ppq.slice(0,1)'>
              <a :href="keyUrl+item.url" class="word-img"><img :src="keyUrl+item.image" alt=""></a>
            </template>
            
            <ul>
              <li v-for='(item,index) in ppq.slice(0,5)' :key='index'>
                <a :href="keyUrl+item.url">
                  <span>{{item.title}}</span><span class="time-word">{{item.pubdate}}日</span>
                </a>
              </li>
            </ul>
          </div>
          <div class="word">
            <template v-for='(item,index) in ppq.slice(5,6)'>
              <a :href="keyUrl+item.url" class="word-img"><img :src="keyUrl+item.image" alt=""></a>
            </template>
            
            <ul>
              <li v-for='(item,index) in ppq.slice(5,10)' :key='index'>
                <a :href="keyUrl+item.url">
                  <span>{{item.title}}</span><span class="time-word">{{item.pubdate}}日</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="box">
          <div class="tit">
            <span>体操</span>
            <router-link tag="span" :to='{name:"list",params:{api:"getTYTc"}}' class="more">更多>></router-link>
          </div>
          <div class="word">
            <template v-for='(item,index) in tc.slice(0,1)'>
              <a :href="keyUrl+item.url" class="word-img"><img :src="keyUrl+item.image" alt=""></a>
            </template>
            
            <ul>
              <li v-for='(item,index) in tc.slice(0,5)' :key='index'>
                <a :href="keyUrl+item.url">
                  <span>{{item.title}}</span><span class="time-word">{{item.pubdate}}日</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="box">
          <div class="tit">
            <span>游泳</span>
            <router-link tag="span" :to='{name:"list",params:{api:"getTYYy"}}' class="more">更多>></router-link>
          </div>
          <div class="word">
            <template v-for='(item,index) in yy.slice(0,1)'>
              <a :href="keyUrl+item.url" class="word-img"><img :src="keyUrl+item.image" alt=""></a>
            </template>
            
            <ul>
              <li v-for='(item,index) in yy.slice(0,5)' :key='index'>
                <a :href="keyUrl+item.url">
                  <span>{{item.title}}</span><span class="time-word">{{item.pubdate}}日</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="comprehensive-right">
      <h3>精彩瞬间</h3>
      <ul>
        <li v-for='(item,index) in main.slice(12,27)' :key='index'>
          <a :href="keyUrl+item.url"><img :src="keyUrl+item.image"></a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import { getTYBanner,getTYMain,getTYYmq,getTYPq,getTYPpq,getTYYy,getTYTc} from '@/request/api'
  import {
    swiper,
    swiperSlide
  } from 'vue-awesome-swiper'

  export default {
    components: {
      swiper,
      swiperSlide
    },

    data() {
      return {
        swiperOption: { //swiper3
          autoplay: {
            delay: 1500,
            disableOnInteraction: true
          },
          observeParents: true,
          observer: true,
          speed: 1000,
          loop: true,
          watchOverflow: false,
          speed: 1000,
          //direction: 'vertical',
          //mousewheel: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev'
          }
        },
        banner:[],
        main:[],
        ymq:[],
        pq:[],
        ppq:[],
        yy:[],
        tc:[],

      };
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    methods: {

    },
    created(){
      getTYBanner().then((v)=>{
        let data = v.data;
        this.banner = data;
      })
      getTYMain().then((v)=>{
        let data = v.data;
        this.main = data;
      })
      getTYYmq().then((v)=>{
        let data = v.data;
        this.ymq = data;
      })
      getTYPq().then((v)=>{
        let data = v.data;
        this.pq = data;
      })
      getTYPpq().then((v)=>{
        let data = v.data;
        this.ppq = data;
      })
      getTYYy().then((v)=>{
        let data = v.data;
        this.yy = data;
      })
      getTYTc().then((v)=>{
        let data = v.data;
        this.tc = data;
      })
    },
    mounted() {
      // current swiper instance
      // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
      //this.swiper.slideTo(0, 555000, false)
    }
  };

</script>

<style lang='scss' scoped>
  .comprehensive {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    .comprehensive-right{
      width: 176px;
      background: #EFEFEF;
      h3{
        height: 34px;
        line-height: 34px;
        font-size: 16px;
        color: #fff;
        background: #CA2B1E;
        text-align: center;
        font-weight: bold;
      }
      ul{
        padding:18px 0;
        li{
          width: 86px;
          height: 86px;
          padding:10px;
          background:#fff;
          margin:0 auto 10px;
          border-radius: 5px;
          img{
            width: 89px;
            height: 89px;
          }
        }
      }
    }
    .nav {
      width: 100%;
      display: flex;

      .left {
        display: flex;
        flex-direction: column;
        font-size: 13px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(63, 63, 63, 1);
        line-height: 28px;
        margin-right: 50px;
        
        a:nth-of-type(1) {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: rgba(197, 34, 21, 1);
        }

        a{
          width: 325px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        a:hover{
          color: rgba(197, 34, 21, 1);
        }
      }

      .right {
        .c-swiper {
          width: 590px;
          height: 326px;

          .page {

            img {
              width: 100%;
              height: 100%;
            }

            span {
              width: 100%;
              height: 40px;
              line-height: 40px;
              background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
              position: absolute;
              z-index: 99;
              font-size: 18px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              color: rgba(255, 255, 255, 1);
              width: 96%;
              padding: 0 2%;
              left: 0;
              bottom: 0;
            }
          }
        }
      }
    }

    .content-wrap {
      margin-top: 38px;

        .box {
          width: 100%;
          display: flex;
          flex-direction: column;

          .tit {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            font-size: 28px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(63, 63, 63, 1);
            padding-bottom: 20px;

            .more {
              font-size: 12px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: rgba(63, 63, 63, 1);
              cursor: pointer;
              &:hover{
                color:#c52215;
              }
            }
          }

          .word {
            display: flex;
            margin-bottom: 18px;
            .word-img{
              width: 196px;
              height: 130px;
              background: #f9f9f9;
            }
            img {
              width: 196px;
              height: 130px;
            }

            ul {
              margin-left: 34px;
              flex: 1;

              li{
                /*display: block;*/
                width: 100%;
                list-style: inside;
                font-size: 13px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: rgba(63, 63, 63, 1);
                line-height: 26px;
                &:hover a{
                  color:#C52215;
                }
                .time-word {
                  float: right;
                  color: rgba(153, 153, 153, 1);
                }
              }
            }
          }
        }
    }

  }

</style>
